<template>

<!--
  这里是 elementui写法
  <div class="app-container">-->
<!--    <el-tabs type="border-card" @tab-click="handleClick">-->
<!--      <el-tab-pane v-for="item in businessList" :label="item.business_name" :key="item.id">-->
<!--        <el-card class="box-card" v-for="dataitem in item.business_data_list" :label="dataitem.data_name" :key="dataitem.id">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>{{ dataitem.data_name }}</span>-->
<!--            <el-checkbox style="float: right; padding: 3px 0" v-model="dataitem.checked" @change="" >选择</el-checkbox>-->
<!--          </div>-->
<!--          <div class="text item">-->
<!--            {{ dataitem.describe }}-->
<!--          </div>-->
<!--        </el-card>-->

<!--      </el-tab-pane>-->
<!--    </el-tabs>-->
<!--  </div>-->

<!--  使用 tdsign写法-->
  <t-space direction="vertical">
    <t-space align="center">
      <t-radio-group v-model="activeRowType" variant="default-filled">
        <t-radio-button value="">不高亮</t-radio-button>
        <t-radio-button value="single">单行高亮</t-radio-button>
        <t-radio-button value="multiple">多行高亮</t-radio-button>
      </t-radio-group>
      <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox>
    </t-space>

    <!-- v-model:activeRowKeys 父组件控制高亮行 -->
    <!-- defaultActiveRowKeys 组件内部控制高亮行，父组件无法使用这个属性控制 -->
    <t-table
        row-key="key"
        :data="tableData"
        :columns="columns"
        :active-row-type="activeRowType"
        :hover="hover"
        lazy-load
        @active-change="onActiveChange"
    ></t-table>
  </t-space>

</template>
<!--<script setup lang="ts">-->
<!--import { ref } from 'vue'-->
<!--let businessList = [-->
<!--  {-->
<!--    "id": 1,-->
<!--    "business_name": "访客",-->
<!--    "business_data_list": [{-->
<!--      "id": 1,-->
<!--      "business_id": 1,-->
<!--      "data_name": "电子访客",-->
<!--      "describe": "访客来访数据"-->
<!--    },-->
<!--      {-->
<!--        "id": 2,-->
<!--        "business_id": 1,-->
<!--        "data_name": "自助机",-->
<!--        "describe": "访客来访数据"-->
<!--      },-->
<!--      {-->
<!--        "id": 9,-->
<!--        "business_id": 1,-->
<!--        "data_name": "电子访客",-->
<!--        "describe": "测试链接"-->
<!--      },-->
<!--      {-->
<!--        "id": 15,-->
<!--        "business_id": 1,-->
<!--        "data_name": "2023年电子访客预约单记录",-->
<!--        "describe": "导出内容：2023年电子访客预约单记录"-->
<!--      }-->
<!--    ]-->
<!--  },-->
<!--  {-->
<!--    "id": 2,-->
<!--    "business_name": "餐饮",-->
<!--    "business_data_list": [{-->
<!--      "id": 3,-->
<!--      "business_id": 2,-->
<!--      "data_name": "餐饮订单数据",-->
<!--      "describe": "内容"-->
<!--    },-->
<!--      {-->
<!--        "id": 12,-->
<!--        "business_id": 2,-->
<!--        "data_name": "离职名单消费明细",-->
<!--        "describe": "导出内容：user_no，user_name，(order_amount/100)，deal_time，pay_channel"-->
<!--      },-->
<!--      {-->
<!--        "id": 13,-->
<!--        "business_id": 2,-->
<!--        "data_name": "早餐",-->
<!--        "describe": "导出内容：时间,餐厅 餐线, 菜品名,价格, 销量 "-->
<!--      }-->
<!--    ]-->
<!--  },-->
<!--]-->

<!--const handleClick = (evt: Event) => {-->
<!--  console.log((evt.target as HTMLInputElement).value)-->
<!--}-->

<!--const chooseChecked = (item) => {-->
<!--  console.log("点击了选中")-->
<!--}-->
<!--</script>-->

<!--<script lang="tsx">-->
<!--export default {-->
<!--  name: 'HighlightTable',-->
<!--};-->
<!--</script>-->

<script lang="tsx" setup>
import { ref, watch } from 'vue';
import { TableProps } from 'tdesign-vue-next';
const activeRowType = ref<TableProps['activeRowType']>('single');
const hover = ref(false);
const tableData: TableProps['data'] = getTableData();
const columns: TableProps['columns'] = [
  {
    colKey: 'applicant',
    title: '申请人',
    width: '100',
  },
  {
    colKey: 'channel',
    title: '签署方式',
  },
  {
    colKey: 'detail.email',
    title: '邮箱地址',
    ellipsis: true,
  },
  {
    colKey: 'createTime',
    title: '申请时间',
  },
];
const onActiveChange: TableProps['onActiveChange'] = (highlightRowKeys, ctx) => {
  console.log(highlightRowKeys, ctx);
};
watch([activeRowType], ([activeRowType]) => {
  if (!activeRowType) {
    hover.value = true;
  }
});
function getTableData(total = 5) {
  const data = [];
  for (let i = 0; i < total; i++) {
    data.push({
      key: i + 1,
      applicant: ['贾明', '张三', '王芳'][i % 3],
      status: i % 3,
      channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
      detail: {
        email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
      },
      matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
      time: [2, 3, 1, 4][i % 4],
      createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
    });
  }
  return data;
}
</script>